<template>
	<view :class="themeStyle">
		<view class="fenxiao-goods">
			<image class="fx_adv" :src="$util.img('upload/uniapp/newfenxiao/my_goods.png')" mode="widthFix"></image>
			<view class="diy-fenxiao-top">
				<view class="fenxiao-title"><text class="fenxiao-title-name">我的商品</text></view>
				<view class="fenxiao-more ns-text-color" @click="toMore()">进入市场</view>
			</view>
			<view class="fenxiao-menu" style="display: none;">
				<view class="menu-item">
					<text class="menu-item-tit">分享好友</text>
					<text>更多佣金挣不停</text>
				</view>
				<view class="shu">
			
				</view>
				<view class="menu-item">
					<text class="menu-item-tit">分销市场</text>
					<text>多种商品任你选择</text>
				</view>
				<view class="shu">
			
				</view>
				<view class="menu-item">
					<text class="menu-item-tit">实力好货</text>
					<text>正品保障放心卖</text>
				</view>
			</view>

			<mescroll-uni ref="mescroll" @getData="getData" top="400" :size="5">
				<view class="goods" slot="list">
					<!-- @click="toGoodsDetail(item.sku_id)" -->
					<view class="goods-list" v-if="goodsList.length != 0" v-for="(item, index) in goodsList" :key="index" 
					 @longtap="delFollowTip(item.collect_id, index)">
						<view class="goods-item">
							<view class="goods-image">
								<image v-if="item.goods_image" :src="$util.img(item.goods_image, { size: $util.goodsImgType('mid',item.source) })" @error="imageError(index)" mode="aspectFill"></image>
								<image v-else :src="$util.getDefaultImage().default_goods_img" mode="aspectFill"></image>
							</view>
							<view class="goods-desc-wrap">
								<view class="goods-desc">
									<view class="goods-bottom">
										<view class="good-share-money">
											<view class="goods-price goods-price-one">
												<text class="name">{{ item.goods_name }}</text>
											</view>
											<view class="goods-price">
												<view class="price-color">￥ <text class="price-color basefont">{{ item.sale_price }}</text></view>
											</view>
										</view>
										<view class="good-edit">
											<text class="btn" @click="open(item)">...</text>
										</view>
										<view class="goods-option" v-show="item.is_show">
											<text class="btn1" @click="removePop(item)">移除</text>
											<text class="btn2" @click="openSkuPop(item)">编辑</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="empty-box">
						<ns-empty v-if="emptyShow && goodsList.length == 0" :isIndex="!1" :fixed="!1"></ns-empty>
					</view>
				</view>
			</mescroll-uni>
		</view>
		
		<uni-popup ref="closeSkuPop" :maskClick="false">
			<view class="sku-edit">
				<view class="close-icon">
					<text class="close-icon-text" @click="closesSkuPop">+</text>
				</view>
				<view class="img-goods">
					<view class="img-goods-info">
						<view class="goods-info-title">
							确认要已移除吗？
						</view>
					</view>
				</view>
				<view class="goods-price-info" style="visibility: hidden;">
					<view class="goods-info-descs">
						<text class="goods-info-item"></text>
					</view>
					<view class="goods-price-item">
						<text class="price">成本价</text>
						<view class="price-info">
							<text class="price-logo">￥</text>
							<text class="price-size"></text>
						</view>
						<view class="goods-price-item goods-price-item-input">
							<text class="price">建议售价</text>
							<view class="price-info">
								<text class="price-logo-active">￥</text>
								<input class="price-size-input" type="number" />
							</view>
						</view>
					</view>
					
				</view>
				<view class="goods-price-item">
					<button type="default" class="save_goods_skus" @click="sureRemove(curRemoveItem)">确定</button>
					<button type="default" class="save_goods_skus" @click="closesSkuPop">取消</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="skuPop" :maskClick="false">
			<view class="sku-edit">
				<view class="close-icon">
					<text class="close-icon-text" @click="closeSkuPop">+</text>
				</view>
				<view class="img-goods">
					<view class="imgs-goods-detail">
						<image class="img-box" :src="$util.img(itemData.goods_image)" mode=""></image>
					</view>
					<view class="img-goods-info">
						<view class="goods-info-title">
							{{itemData.goods_name}}
						</view>
					</view>
				</view>
				<view class="goods-price-info"  v-for="(item,index) in currentItem">
					<view class="goods-info-descs">
						<text class="goods-info-item">{{ item.sku_name }}:</text>
					</view>
					<view class="goods-price-item">
						<text class="price">成本价</text>
						<view class="price-info">
							<text class="price-logo">￥</text>
							<text class="price-size">{{ item.price }}</text>
						</view>
						<view class="goods-price-item goods-price-item-input">
							<text class="price">建议售价</text>
							<view class="price-info">
								<text class="price-logo-active">￥</text>
								<input class="price-size-input" type="number" v-model="currentItem[index].sale_price" />
							</view>
						</view>
					</view>
					
				</view>
				<view class="goods-price-item goods-price-items">
					<button type="default" class="save_goods_sku" @click="save_good_sku">保存</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import fenxiaoWords from 'common/js/fenxiao-words.js';
	import MescrollMixin from '@/components/mescroll/mescroll-mixins.js';
	export default {
		data() {
			return {
				goodsList: [],
				goodsId: 0,
				emptyShow: false,
				searchText: '',
				account: 0,
				memberImg: '',
				memberName: '',
				itemData: '',
				currentItem: [],
				tampItemarr: [],
				tampItem: {
					sku_id: 0,
					price: 0,
				},
				curRemoveItem: '',
				is_show: false,
			};
		},
		computed: {
			//vueX页面主题
			themeStyle() {
				return 'theme-' + this.$store.state.themeStyle
			}
		},
		onLoad() {},
		mixins: [fenxiaoWords, MescrollMixin],
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();

			uni.setNavigationBarTitle({
				title: this.fenxiaoWords.concept + '商品'
			});

			if (uni.getStorageSync('token')) {
				this.getMemberInfo();
			} else {
				this.$util.redirectTo(
					'/pages/login/login/login', {
						back: '/otherpages/fenxiao/goods/goods'
					},
					'redirectTo'
				);
			}
		},
		methods: {
			open(item) {
				item.is_show = !item.is_show;
				this.$forceUpdate();
			},
			sureRemove(item) {
				this.$api.sendRequest({
					url: '/newfenxiao/api/goods/deleteMemberGoods',
					data: {
						goods_id: item.goods_id,
					},
					success: res => {
						if(res.code == 0) {
							this.$util.showToast({
								title: '移除成功'
							})
							this.closesSkuPop();
							setTimeout(()=>{
								this.$refs.mescroll.refresh();
							},1000);
						}
					},
					fail: res => {
						this.$util.showToast({
							title: '移除失败，请重新修改!!!'
						})
						this.closesSkuPop();
					}
				});
			},
			closesSkuPop() {
				this.$refs.closeSkuPop.close();
			},
			toMore() {
				this.$util.redirectTo('/otherpages/newfenxiao/follow/market');
			},
			removePop(item) {
				this.$refs.closeSkuPop.open();
				this.curRemoveItem = item;
			},
			save_good_sku() {
				
				this.tampItemarr = new Array();
				for(var i = 0; i < this.currentItem.length; i++) {
					var item = new Object();
					item.sku_id = this.currentItem[i].sku_id;
					item.price = this.currentItem[i].sale_price;
					this.tampItemarr.push(item);
					item = {};
				}
				this.$api.sendRequest({
					url: '/newfenxiao/api/goods/updateMemberGoodsPrice',
					data: {
						goods_id: this.goodsId,
						sku_data: JSON.stringify(this.tampItemarr),
					},
					success: res => {
						if(res.code == 0) {
							this.$util.showToast({
								title: '修改成功！！！'
							})
							this.closeSkuPop();
						}else {
							this.$util.showToast({
								title: res.data,
							})
						}
					},
					fail: res => {
						this.$util.showToast({
							title: '修改失败，请重新修改!!!'
						});
						this.closeSkuPop();
					}
				});
			},
			closeSkuPop() {
				this.$refs.skuPop.close();
			},
			//打开修改弹框
			openSkuPop(item){
				this.$api.sendRequest({
					url: '/newfenxiao/api/goods/getMemberGoodsInfo',
					data: {
						goods_id: item.goods_id,
					},
					success: res => {
						if(res.code == 0 && res.data) {
							this.currentItem = res.data.sku_data;
							this.goodsId = res.data.goods_id;
							console.log(this.currentItem,'current');
						}
					},
					fail: res => {
						this.$util.showToast({
							title: '商品详情获取失败！！！'
						})
					}
				});
				this.$refs.skuPop.open();
				this.itemData = item;
				
			},
			//获得列表数据
			getData(mescroll) {
				this.emptyShow = false;
				if (mescroll.num == 1) {
					this.withdrawList = [];
				}
				this.$api.sendRequest({
					url: '/newfenxiao/api/goods/getMemberGoodsPage2',
					data: {
						page_size: mescroll.size,
						page: mescroll.num,
					},
					success: res => {
						if(res.code==-1&&res.error_code=='TOKEN_ERROR'){
							this.$util.showToast({'title':'登录失败'});
							let pageRouter=getCurrentPages();
							let data=pageRouter[pageRouter.length-1].options;
							let back=pageRouter[pageRouter.length-1].route;
							data.back=back;
							setTimeout(()=>{
								this.$util.redirectTo('/pages/login/login/login', data);
							},1500)
							return;
						}
						this.emptyShow = true;
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data && res.data.list) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.goodsList = []; //如果是第一页需手动制空列表
						this.goodsList = this.goodsList.concat(newArr); //追加新数据
						this.goodsList.forEach(item=>{
							item.is_show = false;
						})
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			//搜索
			search() {
				this.$refs.mescroll.refresh();
			},
			//获取个人信息
			getMemberInfo() {
				this.$api.sendRequest({
					url: '/fenxiao/api/fenxiao/detail',
					data: {},
					success: res => {
						if (res.code == 0 && res.data) {
							this.account = res.data.account;
							this.memberId = res.data.member_id;
							if (res.data.headimg) {
								this.memberImg = res.data.headimg;
							} else {
								this.memberImg = this.$util.getDefaultImage().default_headimg;
							}
							this.memberName = res.data.fenxiao_name;
						}
					}
				});
			},
			imageError(index) {
				this.goodsList[index].sku_image = this.$util.getDefaultImage().default_goods_img;
				this.$forceUpdate();
			},
			goTixian() {
				this.$util.redirectTo('/otherpages/fenxiao/withdraw_apply/withdraw_apply');
			},
			//跳转至商品详情
			toGoodsDetail(e) {
				this.$util.redirectTo('/pages/goods/detail/detail', {
					sku_id: e
				});
			},
			//取消关注
			delFollowTip(e, f) {
				uni.showActionSheet({
					itemList: ['取消关注'],
					success: res => {
						if (res.tapIndex == 0) {
							this.delFollow(e, f);
						}
					},
					fail: res => {}
				});
			},
			delFollow(e, f) {
				this.$api.sendRequest({
					url: '/fenxiao/api/goodscollect/delete',
					data: {
						collect_id: e
					},
					success: res => {
						let msg = '';
						if (res.code == 0) {
							msg = '取消成功';
						} else {
							msg = res.message;
						}
						this.$util.showToast({
							title: msg
						});

						let arr = this.goodsList;
						arr.splice(f, 1);
						this.goodsList = arr;
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.price-color{
		color: #FF4544 !important;
	}
	// [data-theme] {
		.fx_adv {
			width: 100%;
			display: block;
		}
		
		.sku-edit {
			width: 600rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 60rpx 40rpx 30rpx 40rpx;
			
			.goods-price-items {
				margin-top: 40rpx;
			}
			
			.goods-price-item {
				display: flex;
				justify-content: space-between;
				height: 70rpx;
				
				.save_goods_sku {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					margin:0;
					text-align: center;
					background-color: #FF4544;
					color: #fff;
					border-radius: 10rpx !important;
				}
				
				.save_goods_skus {
					width: 200rpx;
					margin:0;
					text-align: center;
					padding: 0 20rpx;
					background-color: #FF4544;
					color: #fff;
				}
			}
			
			.goods-price-info {
				display: flex;
				flex-direction: column;
				
				
				.goods-price-item {
					display: flex;
					justify-content: space-between;
					height: 70rpx;
					
					
					.save_goods_sku {
						width: 100%;
						height: 80rpx;
						line-height: 80rpx;
						margin:0;
						text-align: center;
						background-color: #FF4544;
						color: #fff;
					}
					
					.price {
						color: #909399;
					}
					.price-info {
						display: flex;
						
						.price-logo {
							font-size: $ns-font-size-sm;
							font-weight: 600;
							margin-top: 4rpx;
						}
						
						.price-size {
							font-size: $ns-font-size-lg;
							font-weight: 600;
							color: #303133;
						}
						
						.price-logo-active {
							color: #FF4544;
							font-size: $ns-font-size-sm;
						}
						.price-size-input {
							display: inline-block;
							text-align: right;
							color:#FF4544;
							font-size: $ns-font-size-lg;
							width: 110rpx;
							border-bottom: 1px solid #ddd;
						}
					}
				}
				
				.goods-price-item-input{
					height: 90rpx;
				}
			}
			
			.img-goods {
				display: flex;
				margin-bottom: 40rpx;
				background-color: #f3f3f3;
				
				.imgs-goods-detail {
					border-radius: 20rpx;
					overflow: hidden;
					
					.img-box {
						width: 150rpx;
						height: 150rpx;
						border-radius: 20rpx;
						vertical-align: middle;
					}
				}
				
				.img-goods-info {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: flex-start;
					margin-left: 20rpx;
					
					.goods-info-title {
						letter-spacing: 0;
						font-weight: 600;
						line-height: 1.2;
						font-size: $ns-font-size-lg;
						color: #303133;
					}
					
					.goods-info-descs {
						display: flex;
						.goods-info-item {
							color: #909399;
							padding-right: $ns-padding;
						}
					}
				}
			}
			
			.close-icon {
				position: relative;
		
				.close-icon-text{
					position:absolute;
					top:-80rpx;
					right: -32rpx;
					display: inline-block;
					transform: rotate(45deg);
					font-weight: 100;
					font-size: 60rpx;
					color: #909399;
				}
			}
		}

		.diy-fenxiao-top {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: $ns-padding $ns-padding;
			box-sizing: border-box;
			.fenxiao-title {
				display: flex;
				align-items: center;
		
				.fenxiao-title-name {
					font-size: $ns-font-size-base;
					font-weight: bold;
					margin-right: $ns-margin;
				}
		
				.fenxiao-title-time {
					font-size: $ns-font-size-sm;
				}
			}
		
			.fenxiao-more {
				font-size: $ns-font-size-sm;
			}
		
			.fenxiao-more::after {
				font-family: 'iconfont';
				content: '\eb93';
				font-size: $ns-font-size-base;
				line-height: 1;
				position: relative;
				top: 2rpx;
				margin-left: 4rpx;
			}
		}

		.fenxiao-menu {
			margin: 24rpx;
			height: 124rpx;
			display: flex;
			background-color: #FFFFFF;
			align-items: center;

			.menu-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding-left: 36rpx;

				.menu-item-tit {
					font-size: 24rpx;
					color: #000000;
				}

				text {
					color: #838383;
					font-size: 20rpx;
				}
			}

			.shu {
				width: 1rpx;
				height: 92rpx;
				border: 1rpx solid #EAEAEA;
			}
		}

		.goods {
			box-sizing: border-box;
			margin-top: 22rpx;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			background-color: #f7f7f7;

			.goods-list {
				width: 342rpx;
				background-color: #FFFFFF;
				border-radius: 5rpx;
				box-sizing: border-box;
				margin: 24rpx 0 24rpx 24rpx;

				.goods-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
	
					box-sizing: border-box;
					padding: 10rpx 10rpx;

					.goods-image {
						width: 301rpx;
						height: 301rpx;
						border-radius: 5rpx;
						margin-top: 19rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 5rpx;
							box-sizing: border-box;
						}
					}

					.goods-desc-wrap {
						padding: 22rpx;
						width: 300rpx;
					
						.goods-desc {
							// min-height: 160rpx;
							// padding-left: $ns-padding;
							// box-sizing: border-box;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
					
							.goods-name {
								width: 100%;
					
								.name {
									line-height: 1.3;
									font-weight: 500;
									font-family: PingFang-SC-Medium;
									word-break: break-all;
									// text-overflow: ellipsis;
									// overflow: hidden;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									font-size: $ns-font-size-base;
									line-height: 1.8;
									color: #303133;
								}
							}
					
							.goods-bottom {
								width: 100%;
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding: 0;
								position: relative;
					
								.good-edit {
									position: absolute;
									right:0;
									top:100rpx;
									
									.btn {
										font-size: 36rpx;
										font-weight: 700;
										padding: 8rpx 16rpx;
										border-radius: 40rpx
									}
								}
								
								.goods-option {
									position: absolute;
									right:0;
									bottom: 50rpx;
									border: 1px solid #ccc;
									padding:5rpx 10rpx;
									border-radius: 10rpx;
									display: flex;
									flex-direction: column;
									background-color: #fff;
									
									.btn1 {
										
									}
								}
								
								
								.goods-price {
									display: flex;
									flex-direction: column;
									justify-content: center;
									font-size: $ns-font-size-sm;
									margin-top: 10rpx;
									color: #FF4544;
									
									
									
									.name {
										color: #000;
										text-align: left;
									}
									
								}
					
								.good-share-money {
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									align-items: flex-start;
									
										.goods-price-one {
											height: 80rpx;
										}
									
										.goods-price {
										width: 300rpx;
										margin-top: 20rpx;
										
										.price-color {
											color: #FF4544;
										}
										
										.basefont {
											font-size: 28rpx;
										}
										
										.name {
											color: #333;
											text-align: left;
											font-size: 24rpx;
											overflow: hidden;
											text-overflow:ellipsis;
											display: -webkit-box;
											-webkit-line-clamp: 2;
											-webkit-box-orient: vertical;
										}
										
									}
								}
					
								.level_money {
									line-height: 1.2;
									margin-right: 10rpx;
									display: flex;
									justify-content: center;
									align-items: center;
									border: 1px solid #FF4544;
					
									.img{
										width: 20rpx;
										height: 20rpx;
										margin: 0 10rpx;
										vertical-align: middle;
									}
									
									.money_sign {
										display: flex;
										justify-content: center;
										align-items: center;
										float: left;
										font-size: $ns-font-size-sm;
										color: #ff4544;
									}
					
									.money {
										float: left;
										height: 100%;
										font-size: $ns-font-size-sm;
									}
								}
							}
						}
					}
				}

			}
		}

		.empty-box {
			margin-top: 150rpx;
			width: 100%;
		}
	// }
</style>


<style scoped>
	/deep/ .uni-popup__wrapper-box {
		border-radius: 10rpx;
	}
	
	
	/deep/ .sku-edit .goods-price-item .save_goods_skus{
		border-radius: 10rpx !important;
	}
</style>